<template>
    <view class="user-card">
        <!-- 车主信息模块 -->
        <view class="wallet-card2">
            <view class="credit-header-left">
                <view class="title">车主</view>
                <view class="score">{{uname}}</view>
            </view>
            <view class="credit-header-right">
                <view class="title">当前诚信值</view>
                <view class="score">{{num}}</view>
            </view>
        </view>

        
        <view class="reviews-container">
            <view class="rating-section">
                <view class="rating-count">
                    <view class="good-rating" :class="{ active: selectedEval === 1 }" @click="handleEval(1)">好评 {{goodNum}}</view>
                    <view class="bad-rating" :class="{ active: selectedEval === 2 }" @click="handleEval(2)">差评 {{noGoodNum}}</view>
                </view>
            </view>
            <view v-if="reviews.length > 0" class="review-item" v-for="(review, index) in reviews" :key="index">
                <view class="reviewer-name">
                    <text>{{review.nickname}}</text>
                    <image v-if="review.type == 1" class="reviews-icon" src="/static/home/reviews.png" mode="aspectFill"></image>
                    <image v-if="review.type == 2" class="reviews-icon" src="/static/personalCenter/bad.png"
                        mode="aspectFill"></image>
                </view>
                <view class="review-content">{{review.content}}</view>
            </view>
            <empty-data class="my-trip" v-if="reviews.length == 0"  defaultText="暂无数据" />
        </view>
    </view>
</template>

<script>

export default {
    data() {
        return {
            reviews: [],
            goodNum: 0,
            noGoodNum: 0,
            userInfo: null,
            uid: '',
            uname: "",
            num: 0,
            selectedEval: 1 // 1好评 2差评
        }
    },
    onLoad(option) {
        this.userInfo = uni.getStorageSync('userInfo')
        this.uid = option.uid
        this.uname = option.uname
        this.num = option.num
        this.getData()
    },
    methods: {
        handleEval(type){
            this.selectedEval = type
            this.getData()  
        },
        async getData() {
            let params = {
                page: 1,
                size: 20,
                evaluate_uid: this.uid,
                months: '3',
                type: this.selectedEval
            }
            let { page, size, evaluate_uid, months, type } = params
            let url = `/h5/line/getCarOwnerEvaluate?page${page}&size=${size}&evaluate_uid=${evaluate_uid}&months=${months}&type=${type}`
            try {
                const data = await this.$http.get(url)
                this.reviews = data.data.list.list || [];
                // 非空判断
                if(data.data.statistics.length > 0){
                    this.goodNum =  data.data.statistics[0].count
                    this.noGoodNum =  data.data.statistics[1].count
                }
                // this.detailsInfo = data.data
            } catch (error) {}
        },
    }

}
</script>

<style>
.user-card {
    padding: 20rpx 26rpx;
}


/*  */
.wallet-card2 .credit-header-left,
.credit-header-right {
    text-align: center;
}

.credit-header-right {
    padding-left: 248rpx;
}

.wallet-card2 .title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 48rpx;
    padding-bottom: 30rpx;
}

.wallet-card2 .score {
    font-family: DINPro, DINPro;
    font-weight: 500;
    font-size: 48rpx;
    color: #FFFFFF;
    line-height: 48rpx;
}



.wallet-card2 {
    width: 100%;
    height: 220rpx;
    background-image: url("~@/static/home/reviews-bg.png");
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;

}

.rating-section {
    margin-bottom: 20px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 48rpx;
    text-align: center;

}

.rating-count {
    display: flex;
    justify-content: space-between;
}

.good-rating,
.bad-rating {
    width: 320rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: #F5F5F6;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    color: #666666;
}
.active{
    width: 320rpx;
    height: 100rpx;
    line-height: 100rpx;
    color: #FFFFFF;
    background: linear-gradient(90deg, #FF3F39 0%, #FF7937 100%), #FFFFFF;
    border-radius: 16rpx;
}
.reviews-container {
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 20rpx;
}

.review-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}

.review-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.reviewer-name {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28rpx;
    color: #666666;
    padding-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reviews-icon {
    width: 40rpx;
    height: 40rpx;
}

.review-content {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 30rpx;
    color: #0B1F20;
}
</style>